<template>
	<zui-box class="indexbox">
		<zui-navbar title="自主邮寄"></zui-navbar>
		
		<u-gap height="30rpx"></u-gap>
		
		<!-- //平面盒子 -->
		<view @click="xz_go('address_opt')">
			<zui-flat bgColor='#fff'>
				<!-- //地址列表 -->
				<zui-address
				 :is_null="address==''"
				 :name='address.name'
					:phone='address.phone'
				  :address="address.pro_name+'-'+address.city_name+'-'+address.area_name+'-'+address.address"
				  >
				</zui-address>
			</zui-flat>
		</view>
		
		<u-gap height="30rpx"></u-gap>
		<zui-flat bgColor='#fff'>
			<view class="numbox">
				<view class="tit">金饰回收</view>
				<u-input v-model="gold_weight" type="number" shape="circle" placeholder="请输入金饰重量" border="none" clearable color="#999">
					<template slot="suffix">
						<text>克</text>
					</template>
				</u-input>
				<view class="tags">黄金戒指、项链、手镯、耳饰等</view>
			</view>
		</zui-flat>
<u-gap height="30rpx"></u-gap>


<zui-flat bgColor='#fff'>
		<view class="numbox">
			<view class="num">上传物流凭证</view>
			<view class="imgs"><u-upload :fileList="fileList" width="100" height="100" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"></u-upload></view>
			<view class="num">示例图片（上传快递单号、实物图、包裹图凭证图片）</view>
			<view class="imgs"><image src="../../static/img/empty.png" mode=""></image></view>
		</view>
</zui-flat>
			
		<u-gap height="30rpx"></u-gap>

		<zui-flat bgColor='#fff'>
			<u-cell title="快递名称" :isLink="true" :value="delivery_name" :border="false" @click="show = true"></u-cell>
		</zui-flat>
		<zui-flat bgColor='#fff'>
		<u-form-item label="快递单号" labelWidth="100" :borderBottom="false">
			<u-input inputAlign="right" v-model="delivery_sn" border="none" placeholder="请输入快递单号"></u-input>
		</u-form-item>
		</zui-flat>
		<zui-flat bgColor='#fff'>
			<u-cell title="收款方式" :isLink="true" :value="collect_name" :border="false" @click="payshow = true"></u-cell>
		</zui-flat>
		<zui-button @fun="save" bgColor='#AA334F'>立即回收</zui-button>

		<u-picker :show="show" title="快递" :columns="LogisticsList"
		 @close='show = false' :closeOnClickOverlay='true' keyName="name" @cancel="show = false" @confirm="confirm"></u-picker>
		<u-picker :show="payshow" title="收款方式" :columns="paylist"
		 @close='payshow = false' :closeOnClickOverlay='true' keyName="name" @cancel="payshow = false" @confirm="payconfirm"></u-picker>
	</zui-box>
</template>

<script>
export default {
	data() {
		return {
			address: '',
			gold_weight: '',
			fileList: [],
			delivery_id: '',
			delivery_name: '',
			delivery_sn: '',
			collect_type: '',
			collect_name: '',
			LogisticsList: [],
			show: false,
			paylist: [[{ name: '支付宝', key: 1 }, { name: '微信', key: 2 }, { name: '银行卡', key: 3 }]],
			payshow: false
		};
	},
	onLoad() {
		this.getaddres();
	},
	methods: {
		getaddres() {
			
			uni.$u.http
				.get('/app/address/list', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					console.log('====',res[0])
					this.address = res[0];
				})
				.catch(err => {
					
				});

			uni.$u.http
				.get('/app/shop_sell/getLogisticsList', {
					params: {},
					custom: {
						auth: true,
						toast: true,
						catch: true
					}
				})
				.then(res => {
					
					this.LogisticsList.push(res);
				})
				.catch(err => {
					
				});
		},
	
		confirm(data) {
			this.delivery_id = data.value[0].id;
			this.delivery_name = data.value[0].name;
			this.show = false;
		},
		payconfirm(data) {
			console.log(data);
			
			this.collect_type = data.value[0].key;
			this.collect_name = data.value[0].name;
			this.payshow = false;
		},
		// 删除图片
		deletePic(event) {
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map(item => {
				this[`fileList${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				});
			});
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url);
				let item = this[`fileList${event.name}`][fileListLen];
				this[`fileList${event.name}`].splice(
					fileListLen,
					1,
					Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					})
				);
				fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: this.httpPath + '/app/tool/uploadImage', // 仅为示例，非真实的接口地址
					filePath: url,
					name: 'image',
					success: res => {
						let data = JSON.parse(res.data);
						uni.$emit('upimg', data);
						setTimeout(() => {
							resolve(data.data);
						}, 1000);
					}
				});
			});
		},
		save() {
			if (!this.address.id) return this.say('请选择收货地址');
			if (!this.gold_weight) return this.say('请输入金饰重量');
			let delivery_image = this.fileList.map(item => item.url)[0];
			if (!delivery_image) return this.say('请上传物流凭证');
			if (!this.delivery_id) return this.say('请选择物流');
			if (!this.delivery_sn) return this.say('请填写配送单号');
			if (!this.collect_type) return this.say('请选择收款方式');
			uni.$u.http
				.post(
					'/app/shop_sell/makeOrder',
					{
						address_id: this.address.id,
						gold_weight: this.gold_weight,
						delivery_image,
						delivery_id: this.delivery_id,
						delivery_sn: this.delivery_sn,
						collect_type: this.collect_type
					},
					{
						params: {},
						custom: {
							auth: true,
							toast: true,
							catch: true
						}
					}
				)
				.then(res => {
					uni.$u.toast('成功');
					this.gold_weight = '';
					this.delivery_name = '';
					this.delivery_sn = '';
					this.collect_name = '';
					this.fileList = [];
					setTimeout(() => {
						uni.navigateBack();
					}, 1200);
				})
				.catch(err => {});
		}
	}
};
</script>

<style lang="scss" scoped>
$back: #fff;
$color: #9d97a7;
$sl_color: #ffe5a5;
view,
text,
* {
	box-sizing: border-box;
}
.indexbox {

	.addbox {
		width: 100%;
		background-color: $back;
		padding: 20rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		.left {
			width: 52rpx;
			height: 52rpx;
		}
		.contentbox {
			width: 80%;
			color: $color;
			.topbox {
				width: 100%;
				color: $sl_color;
				font-size: 34rpx;
				text {
					margin-left: 20rpx;
					color: $color;
					font-size: 28rpx;
				}
			}
			.address {
				width: 100%;
				color: $color;
				font-size: 28rpx;
				margin-top: 10rpx;
				line-height: 1.5;
			}
		}
	}
	.numbox {
		color: #666;
		// width: 100%;
		// background-color: $back;
		padding: 20rpx 0;
		// border-radius: 20rpx;
		// margin-bottom: 30rpx;
		.tit {
			width: 100%;
			color: #666;
			font-size: 28rpx;
			line-height: 2;
		}
		/deep/.u-input {
			width: 100%;
			margin: 30rpx 0;
			.u-input__content__subfix-icon {
				color: $color;
			}
		}
		.tags {
			width: 100%;
			color: $color;
			font-size: 22rpx;
		}
		.num {
			width: 100%;
			color: #666;
			font-size: 26rpx;
			line-height: 2;
		}
		.imgs {
			width: 100%;
			padding: 10rpx 0 0;
			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}
	/deep/.u-cell {
		.u-cell__body{
			padding: 20rpx 0;
		}
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		.u-cell__title-text,
		.u-cell__value {
			color: $color;
		}
	}
	/deep/.u-form-item {
		background: #fff;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		padding: 0 ;
		.u-form-item__body__left__content__label,
		.uni-input-input {
			color: $color;
		}
	}
}
</style>
